<script>
import { getProListFn } from '@/api/pro'
import ExportJsonExcel from 'js-export-excel'
export default {
    data() {
        return {
            proList: [],
            current: 1
        }
    },
    mounted() {
        getProListFn().then(res => {
            // console.log(res);
            this.proList = res.data
        })
    },
    computed: {
        tableData() {
            return this.proList.slice((this.current - 1) * 5, (this.current - 1) * 5 + 5)
        }
    },
    methods: {
        exportClick() {
            // 1. 有数据源
            // console.log(this.proList);
            let option = { fileName: '小吴导出的文件' }

            // 配置导出对象
            option.datas = [
                {
                    // 配置导出的数据源(所有数据)
                    sheetData: this.proList,
                    // 导出后工作表的名称
                    sheetName: '小吴导出的工作表1',
                    // 配置需要导出的字段名称
                    sheetFilter: ['proname', 'proid', 'originprice', 'brand'],
                    // 对应字段的标题
                    sheetHeader: ['商品名称', '商品 id', '商品价格', '商品品牌'],
                    // 设置列的宽度
                    columnWidths: [10, 20, 30, 40]
                }, {
                    sheetData: this.proList,
                    sheetName: '小吴导出的工作表2',
                    sheetFilter: ['category', 'img1'],
                    sheetHeader: ['分类', '图片']
                }
            ]

            // 通过配置的对象创建一个 excel 文件
            let toExcel = new ExportJsonExcel(option)

            // 将文件保存在本地
            toExcel.saveExcel()

        }
    },
}
</script>
<template>
    <div>
        <h3>
            <el-button @click="exportClick">文件导出</el-button>
        </h3>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="180">
                <template #default="{ $index }">
                    <div> {{ (current - 1) * 5 + 1 + $index }} </div>
                </template>
            </el-table-column>
            <el-table-column label="商品图片" width="180">
                <template #default="{ row }">
                    <div>
                        <el-image style="width: 75px" :src="row.img1"></el-image>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="proname" label="商品名称" width="320" />
            <el-table-column prop="category" label="商品分类" />
            <el-table-column prop="originprice" label="商品价格" />
        </el-table>

        <el-pagination v-model:current-page="current" :page-size="5" background layout="prev, pager, next"
            :total="proList.length" />

    </div>
</template>